<!--
 * @Author: Ryan
 * @Date: 2022-12-08 12:06:25
 * @LastEditors: Ryan
 * @LastEditTime: 2022-12-11 22:36:31
 * @Description: 开发指南-查询功能
 * @FilePath: /yr-admin/src/views/develop/demo/inquire/index.vue
-->

<template>
  <div class="app-container">
    <div class="block">
      <h2>P1-新建页面</h2>
      <ul>
        <li>
          在工程目录src/views下创建一个菜单页面对应的目录，并在该目录下新建一个index.vue文件
        </li>
        <li>复制菜单[开发示例-页面模版]的模版内容，粘贴到index.vue文件中</li>
      </ul>
      <el-divider />
    </div>

    <div class="block">
      <h2>P2-添加页面路由和菜单</h2>
      <p>菜单工程目录：src/router/modules</p>
      <h3>添加一级菜单</h3>
      <p>在[菜单工程目录]下创建一个菜单对应的目录，并在该目录下新建一个index.js</p>
      <code-editor
        :value="l1Menu"
        :display_language="false"
        font_size="14px"
        width="100%"
      />
      <h3>添加二级菜单</h3>
      <p>在对一级应菜单配置的children字段中添加子菜单配置</p>
      <code-editor
        :value="l2Menu"
        :display_language="false"
        font_size="14px"
        width="100%"
      />
      <el-divider />
    </div>

    <div class="block">
      <h2>P3-定义接口</h2>
      <p>参照菜单[API接口管理]的指引，定义fetchList查询接口。注：为方便复用，采用固定命名。若要修改，需同步修改[页面模版]中对应的调用接口。</p>
      <code-editor
        :value="api"
        :display_language="false"
        font_size="14px"
        width="100%"
      />
      <el-divider />
    </div>

    <div class="block">
      <h2>P4-配置筛选组件</h2>
      <p>将组件插入到视图部分[筛选栏]的[筛选字段]处</p>
      <h3>输入框组件：el-input</h3>
      <code-editor
        :value="input"
        :display_language="false"
        font_size="14px"
        width="100%"
      />
      <p>以title字段为例，在视图中添加组件的同时，还要在script逻辑中data下的listQuery对象中添加title字段(这里默认值是undefined)</p>
      <code-editor
        :value="input1"
        :display_language="false"
        font_size="14px"
        width="100%"
      />
      <h3>下拉框组件：el-select</h3>
      <code-editor
        :value="select"
        :display_language="false"
        font_size="14px"
        width="100%"
      />
      <p>以importance字段为例，在视图中添加组件的同时，还要在script逻辑中data下的listQuery对象中添加importance字段(这里默认值是undefined)和选项数据importanceOptions</p>
      <code-editor
        :value="select1"
        :display_language="false"
        font_size="14px"
        width="100%"
      />
      <h3>日期选择组件：el-date-picker</h3>
      <code-editor
        :value="date"
        :display_language="false"
        font_size="14px"
        width="100%"
      />
      <p>以timestamp字段为例，在视图中添加组件的同时，还要在script逻辑中data下的listQuery对象中添加timestamp字段(这里默认值是当前日期)</p>
      <code-editor
        :value="date1"
        :display_language="false"
        font_size="14px"
        width="100%"
      />
      <el-divider />
    </div>

    <div class="block">
      <h2>P5-定义Table表格字段</h2>
      <p>将组件插入到视图部分[数据Table]的[表格字段]处</p>
      <code-editor
        :value="tableColumn"
        :display_language="false"
        font_size="14px"
        width="100%"
      />
      <p>以timestamp字段为例，添加其他字段同理。el-table-column标签上width参数为字段表格宽度,不设置则宽度自适应。</p>
      <el-divider />
    </div>

    <div class="block">
      <h2>P6-到这里，一个简单的查询功能就完成了</h2>
    </div>
  </div>
</template>

<script>
import CodeEditor from 'simple-code-editor'
export default {
  name: 'DevelopInquire',
  components: { CodeEditor },
  data() {
    return {
      viewText: '视图-<template>',
      codeText: '逻辑-<script>',
      api: `
// API接口函数
import { fetchList } from '@/api/example'
      `,
      tableColumn: `
<el-table-column label="日期" width="150" align="center">
  <template slot-scope="{ row }">
    <span>{{ row.timestamp | parseTime("{y}-{m}-{d} {h}:{i}") }}</span>
  </template>
</el-table-column>
      `,
      date1: `
listQuery: {
  // 当前页码
  page: 1,
  // 数据条数
  limit: 20,
  // 标题
  title: undefined,
  // 重要性
  importance: undefined,
  // 日期
  timestamp: new Date()
},
      `,
      date: `
  <el-date-picker
    v-model="listQuery.timestamp"
    class="filter-item"
    type="date"
    placeholder="选择日期"
  />
      `,
      select1: `
listQuery: {
  // 当前页码
  page: 1,
  // 数据条数
  limit: 20,
  // 标题
  title: undefined,
  // 重要性
  importance: undefined,
},
// 重要性下拉框选项数据
importanceOptions: [1, 2, 3],
      `,
      select: `
<el-select
  v-model="listQuery.importance"
  placeholder="重要性"
  clearable
  style="width: 90px"
  class="filter-item"
>
  <el-option
    v-for="item in importanceOptions"
    :key="item"
    :label="item"
    :value="item"
  />
</el-select>
      `,
      input1: `
listQuery: {
  // 当前页码
  page: 1,
  // 数据条数
  limit: 20,
  // 标题
  title: undefined,
}
      `,
      input: `
<!-- 筛选栏 -->
<div class="filter-container">
  <!-- 筛选字段 -->
  <el-input
    v-model="listQuery.title"
    placeholder="标题"
    style="width: 200px"
    class="filter-item"
    @keyup.enter.native="handleFilter"
  />
</div>
      `,
      l1Menu: `
import Layout from '@/layout'

export default [
  {
    path: '/example',
    component: Layout,
    redirect: 'example',
    children: [{
      path: 'example',
      name: 'Example',
      component: () => import('@/views/example'),
      meta: { title: '一级菜单', icon: 'el-icon-s-home', noCache: true, affix: true, roles: ['develop'] }
    }]
  }
]
      `,
      l2Menu: `
import Layout from '@/layout'

export default [
  {
    path: '/example',
    component: Layout,
    redirect: 'noRedirect',
    name: 'Example',
    meta: { title: '一级菜单', icon: 'el-icon-home' },
    children: [
      {
        path: '/example/submenu',
        name: 'Submenu',
        component: () => import('@/views/example/submenu'),
        meta: { title: '二级菜单' }
      }
    ]
  }
]
      `,
      menusCode: '',
      codeValue: `
<template>
  <div class="app-container">
    <!-- 筛选栏 -->
    <div class="filter-container">
      <!-- 筛选字段 -->

      <!-- 按钮 -->
      <el-button
        v-waves
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
      >
        搜索
      </el-button>
      <el-button
        v-show="showCreateBtn"
        class="filter-item"
        type="primary"
        icon="el-icon-edit"
        @click="handleCreate"
      >
        添加
      </el-button>
    </div>

    <!-- 数据Table -->
    <el-table
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%"
    >
      <!-- 表格字段 -->

      <el-table-column
        label="操作"
        align="center"
        width="180"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{ row, $index }">
          <!-- 编辑 -->
          <el-button v-show="showUpdateBtn" type="primary" size="mini" @click="handleUpdate(row)">
            编辑
          </el-button>
          <!-- 删除 -->
          <el-button
            v-show="showDeleteBtn"
            size="mini"
            type="danger"
            @click="handleDelete(row, $index)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页栏 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />

    <!-- 编辑弹窗 -->
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="temp"
        label-position="left"
        label-width="70px"
        style="width: 400px; margin-left: 50px"
      >
        <!-- 编辑内容 -->

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false"> 取消 </el-button>
        <el-button
          type="primary"
          @click="dialogStatus === 'create' ? createData() : updateData()"
        >
          确认
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 分页组件
import Pagination from '@/components/Pagination'
// API接口函数
import { fetchList, createArticle, updateArticle } from '@/api/example/article'

export default {
  name: 'DemoQuery',
  components: { Pagination },
  data() {
    return {
      // 显示添加按钮
      showCreateBtn: false,
      // 显示编辑按钮
      showUpdateBtn: false,
      // 显示删除按钮
      showDeleteBtn: false,
      // 表格数据
      list: null,
      // 数据总数
      total: 0,
      // 表格加载中
      listLoading: false,
      listQuery: {
        // 当前页码
        page: 1,
        // 数据条数
        limit: 20,
        // ----------添加筛选栏字段----------

      },
      // ----------定义筛选栏下拉框字段数据源----------

      // 编辑弹窗-模板数据
      temp: {

      },
      // 编辑弹窗-状态：create | update
      dialogStatus: '',
      // 显示编辑弹窗
      dialogFormVisible: false,
      // 编辑弹窗-标题
      textMap: {
        update: '编辑',
        create: '添加'
      },
      // 编辑弹窗-表单校验规则
      rules: {

      }
    }
  },
  created() {
    // 默认加载查询一次表格数据
    this.getList()
  },
  methods: {
    // 处理搜索
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    // 重置模板数据
    resetTemp() {
      this.temp = {

      }
    },
    // 处理添加
    handleCreate() {
      this.resetTemp()
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    // 添加数据
    createData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          createArticle(this.temp).then(() => {
            this.list.unshift(this.temp)
            this.dialogFormVisible = false
            this.$notify({
              title: '成功',
              message: '创建成功',
              type: 'success',
              duration: 2000
            })
          })
        }
      })
    },
    // 处理编辑
    handleUpdate(row) {
      this.temp = Object.assign({}, row)
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    // 修改数据
    updateData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const tempData = Object.assign({}, this.temp)
          updateArticle(tempData).then(() => {
            const index = this.list.findIndex(v => v.id === this.temp.id)
            this.list.splice(index, 1, this.temp)
            this.dialogFormVisible = false
            this.$notify({
              title: '成功',
              message: '编辑成功',
              type: 'success',
              duration: 2000
            })
          })
        }
      })
    },
    // 处理删除
    handleDelete(row, index) {
      this.$notify({
        title: '成功',
        message: '删除成功',
        type: 'success',
        duration: 2000
      })
      this.list.splice(index, 1)
    },
    // 获取表格数据
    getList() {
      this.listLoading = true
      fetchList(this.listQuery)
        .then((response) => {
          this.list = response.data.items
          this.total = response.data.total
          this.listLoading = false
        })
        .catch((_) => {
          this.listLoading = false
        })
    }
  }
}
<\/script>

      `
    }
  }
}
</script>

<style scoped lang="scss">
.api-container {
  // width: 870px;
  margin: 0 auto;
  padding: 30px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

  @media (max-width: 992px) {
    width: auto;
  }

  .block {
    h2 {
      padding-bottom: 20px;
    }

    h4 {
      padding-top: 10px;
      padding-bottom: 10px;
    }
  }
}
</style>
